import React,{Component} from 'react'

import{
    Image,
    Text,
    View,
    Button,
    StyleSheet,
    Dimensions,
    ToastAndroid,
    WebView,
    FlatList,
    TouchableHighlight
}from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons';


import Echarts from 'native-echarts';
import DatePicker from 'react-native-datepicker'
    

const { width, height } = Dimensions.get('window');

const uiwidth=(width-30)/2



var HEADER = '#3b5998';
var BGWASH = 'rgba(255,255,255,0.8)';
var DISABLED_WASH = 'rgba(255,255,255,0.25)';

var TEXT_INPUT_REF = 'urlInput';
var WEBVIEW_REF = 'webview';
var DEFAULT_URL = 'https://m.facebook.com';

const styles=StyleSheet.create({
     warp:{
         width:'100%',
         flexDirection:'row',
         justifyContent:'space-around',
         flexWrap:'wrap'
     },
     singui:{
         width:uiwidth,
         paddingTop:30,
         flexDirection:'column',
         alignItems:'center'
     },
     bottom:{
         width:'100%',
         paddingLeft:20,
         paddingRight:20,
         backgroundColor:'white',
         flexDirection:'row',
         justifyContent:'space-between',
         alignItems:'center',
         height:40
     },
     imgui:{
         width:'80%',
         height:40
     },
     topwarp:{
       width:'100%',
       borderBottomWidth:1,
       borderColor:'#ddd',
       height:50,
       flexDirection:'row',
       justifyContent:'space-around',
       alignItems:'center',
       backgroundColor:'white',
       shadowColor:"black",
       shadowOpacity:0.5,
       shadowRadius:2,
       shadowOffset:{h:10,w:10}
     },
     jiange:{
        width:'100%',
        borderTopWidth:1,
        borderColor:'rgba(150,150,150,0.2)',
        height:1
    },
    webView:{
      width:width,
      height:'100%',
      borderWidth:2
    },
    bottwarp:{
      width:width,
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'center',
      height:100,
      borderWidth:1,
      backgroundColor:'white'
    },
    bottitem:{
      width:width/2-5,
      height:30,
      padding:10,
      flexDirection:'row',
      justifyContent:'space-between',
      alignItems:'center'
    },
    botttext:{
    }
 
})


const html='<html><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><title></title></head><body><div style="width:300px;margin:auto;margin-top:200px;color:white;background:black;"> 这是一s个测试的网页</div></body></html>'



export default class FoodChart extends Component{
    static navigationOptions={
        title:'菜品统计',
        headerTitleStyle: {
        alignSelf:'center'
      },
        headerRight: (
        <Text></Text>
        ),
    };
    
    constructor(props){
    super(props)
    this.state = {
      getdata:[],
      chosedata:'',
      datebegin:"2016-05-15",
      dateend:"2019-05-12",
      type:'去选择',
      apple:[2, 4, 7, 2, 2, 7, 13, 16],
      organ: [6, 9, 9, 2, 8, 7, 17, 18],
      status: 'No Page Loaded',
      backButtonEnabled: false,
      forwardButtonEnabled: false,
      loading: true,
      scalesPageToFit: false,
      }
  }

      async componentWillMount(){
        try{
        let response = await fetch(global.mainurl+"bossHelper/getFoodType?sellerid="+global.sellerid+"&userid="+global.userdata.id+"&token="+global.token);
        let result=await response.json()
        var rdata=result.data
        rdata.push({
          id:'',
          name:'所有'
        })
        if(result.code==1){
          this.setState({
          chosedata:rdata
        })
        }
        console.log(result)
        }catch(error){
          console.log(error)
        }
      }
    
    getfoodchose=function(){
      var arry=[];
      this.state.chosedata.forEach(data=>{
        arry.push(data.name)
      })
      return arry
    }

    getchosedid=function(){
      for(var i=0;i<this.state.chosedata.length;i++){
        if(this.state.chosedata[i].name==this.state.type){
          return this.state.chosedata[i].id
        }
      }
    }

    searth= async function(){
      try{
        if(this.state.type=="去选择"){
          ToastAndroid.show('请选择菜品类别', ToastAndroid.SHORT);
          return
        }
        var response=await fetch(global.mainurl+'/bossHelper/tongJiFood', {
                method: 'POST',
                 mode : 'cors',
                headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                body: "sellerid="+global.sellerid+"&userid="+global.userdata.id+"&token="+global.token+"&startTime="+this.state.datebegin+"&endTime="+this.state.dateend+"&foodType="+this.getchosedid()
         })

         var result= await response.json()
         console.log(result)

        if(!result.data){
           ToastAndroid.show('未查询到数据', ToastAndroid.SHORT);
           return
         }

         var arry=[]
         for(var i=0;i<result.data.length;i++){
           arry.push({
             value:result.data[i].num,
             name:result.data[i].name
           })
         }
         
         
           this.setState({
             getdata:arry
           })
           this.injectJS(arry);

         
         

      }catch(error){
        console.log(eror)
      }
      
    }

    savedata=function(d){
        this.setState({
            type:d
        })
    }

    injectJS = (data) => {
      console.log(data)
      console.log(data.toString())
      var dd=data
    const script = "json.splice(0,json.length);json="+JSON.stringify(dd)+" ;json=JSON.parse(JSON.stringify(json)) ;option.series[0].data=json; echartsPie.setOption(option);"
    console.log(script)
    if (this.webview) {
      this.webview.injectJavaScript(script);
    }
  }

    render(){
      
    return (
      <View style={styles.warp}>
      <View style={styles.topwarp}>
      <DatePicker
        style={{width: 130}}
        date={this.state.datebegin}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2019-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36,
            borderRadius:8
          }
        }}
        onDateChange={(date) => {this.setState({datebegin: date})}}
      />
      <Text>至</Text>
      <DatePicker
        style={{width: 130}}
        date={this.state.dateend}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate="2016-05-01"
        maxDate="2019-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          dateIcon: {
            position: 'absolute',
            left: 0,
            top: 4,
            marginLeft: 0
          },
          dateInput: {
            marginLeft: 36,
            borderRadius:8
          }
        }}
        onDateChange={(date) => {this.setState({dateend: date})}}
      />
      </View>

      <View style={styles.bottom}>
      <Text>菜品种类</Text>
      <Text
      onPress={()=>{
                        this.props.navigation.navigate("Chose",{data:this.getfoodchose(),save:(d)=>{this.setState({type:d})}})
                    }}
       style={{fontSize:15,color:'black'}}>{this.state.type}<Icon name="ios-arrow-dropright" size={15} color="#4F8EF7" /></Text>
      </View>
      <View style={{marginTop:4,width:'100%'}}>
            <Button
                    onPress={()=>{this.searth()}}
                    title="查询"
                    style={{padding:20}}
                    color="#841584"
            />
      </View>
      
    <View style={{width:'100%',height:height-300}}>
     <WebView
          style={styles.webView}
          source={{ uri:'http://192.168.1.14:8020/%E6%B5%8B%E8%AF%95%E7%9B%AE%E5%BD%95%E3%80%81/chart.html?__hbt=1516357329358'}}
          ref={webview => { this.webview = webview; }}
          startInLoadingState={true}
        />
  </View>

  <View style={styles.bottwarp}>
  <FlatList
  data={this.state.getdata}
  keyExtractor={(item, index) => index}
  numColumns={2}
  renderItem={
    (item)=>{
      return(
      <View style={styles.bottitem}>
      <Text  numberOfLines={1} style={{width:width*2/9,padding:4}}>{item.item.name}</Text>
      <Text  >{item.item.value}份</Text>
      </View>
      )
    }
  }
  />
  </View>

      </View>
      
    )
  }
    
}